{% extends "base.html" %}

{% block title %}编辑架构方案{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2 class="mb-3">编辑架构方案</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('main.architecture_list') }}">系统架构</a></li>
                    <li class="breadcrumb-item">
                        <a href="{{ url_for('main.architecture_detail', architecture_id=architecture.id) }}">
                            {{ architecture.name }}
                        </a>
                    </li>
                    <li class="breadcrumb-item active">编辑</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <form method="post" id="editForm">
                <!-- 基本信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">基本信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="name" class="form-label">方案名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   value="{{ architecture.name }}" required
                                   minlength="2" maxlength="128">
                            <div class="form-text">2-128个字符</div>
                        </div>
                        <div class="mb-3">
                            <label for="architecture_type" class="form-label">架构类型 <span class="text-danger">*</span></label>
                            <select class="form-select" id="architecture_type" name="architecture_type" required>
                                <option value="centralized" {% if architecture.architecture_type == 'centralized' %}selected{% endif %}>
                                    集中式
                                </option>
                                <option value="distributed" {% if architecture.architecture_type == 'distributed' %}selected{% endif %}>
                                    分布式
                                </option>
                                <option value="hybrid" {% if architecture.architecture_type == 'hybrid' %}selected{% endif %}>
                                    混合式
                                </option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">方案描述</label>
                            <textarea class="form-control" id="description" name="description" 
                                      rows="3">{{ architecture.description }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- 系统拓扑 -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">系统拓扑</h5>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addTopologyNode()">
                            <i class="fas fa-plus me-1"></i>添加节点
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="topologyNodes">
                            <!-- 动态添加的节点将显示在这里 -->
                        </div>
                        <input type="hidden" id="topology" name="topology" value="">
                    </div>
                </div>

                <!-- 系统组件 -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">系统组件</h5>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addComponent()">
                            <i class="fas fa-plus me-1"></i>添加组件
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="components">
                            <!-- 动态添加的组件将显示在这里 -->
                        </div>
                        <input type="hidden" id="componentsData" name="components" value="">
                    </div>
                </div>

                <!-- 通信方式 -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">通信方式</h5>
                        <button type="button" class="btn btn-sm btn-primary" onclick="addCommunication()">
                            <i class="fas fa-plus me-1"></i>添加协议
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="communications">
                            <!-- 动态添加的通信协议将显示在这里 -->
                        </div>
                        <input type="hidden" id="communicationData" name="communication" value="">
                    </div>
                </div>

                <div class="d-flex gap-2 mb-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>保存更改
                    </button>
                    <a href="{{ url_for('main.architecture_detail', architecture_id=architecture.id) }}" 
                       class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i>取消
                    </a>
                </div>
            </form>
        </div>

        <div class="col-md-4">
            <!-- 帮助信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">编辑说明</h5>
                </div>
                <div class="card-body">
                    <h6 class="card-subtitle mb-2">基本信息</h6>
                    <p class="card-text small">填写方案的基本信息，包括名称、类型和描述。名称为必填项。</p>
                    
                    <h6 class="card-subtitle mb-2">系统拓扑</h6>
                    <p class="card-text small">添加系统中的节点信息，包括节点名称和类型。可以根据需要添加多个节点。</p>
                    
                    <h6 class="card-subtitle mb-2">系统组件</h6>
                    <p class="card-text small">添加系统使用的组件，包括组件名称、类型和配置参数。</p>
                    
                    <h6 class="card-subtitle mb-2">通信方式</h6>
                    <p class="card-text small">配置系统中使用的通信协议，包括协议名称、类型和参数设置。</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 初始化数据
const initialTopology = JSON.parse('{{ architecture.topology|tojson|safe if architecture.topology else "[]" }}');
const initialComponents = JSON.parse('{{ architecture.components|tojson|safe if architecture.components else "[]" }}');
const initialCommunication = JSON.parse('{{ architecture.communication|tojson|safe if architecture.communication else "[]" }}');

// 系统拓扑相关函数
function addTopologyNode() {
    const nodes = JSON.parse(document.getElementById('topology').value || '[]');
    nodes.push({ name: '', type: '' });
    updateTopologyNodes(nodes);
}

function updateTopologyNodes(nodes) {
    const container = document.getElementById('topologyNodes');
    container.innerHTML = nodes.map((node, index) => `
        <div class="row mb-3 align-items-center">
            <div class="col">
                <input type="text" class="form-control" placeholder="节点名称"
                       value="${node.name || ''}" onchange="updateNodeName(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="节点类型"
                       value="${node.type || ''}" onchange="updateNodeType(${index}, this.value)">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeNode(${index})">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    `).join('');
    document.getElementById('topology').value = JSON.stringify(nodes);
}

function updateNodeName(index, value) {
    const nodes = JSON.parse(document.getElementById('topology').value || '[]');
    nodes[index].name = value;
    document.getElementById('topology').value = JSON.stringify(nodes);
}

function updateNodeType(index, value) {
    const nodes = JSON.parse(document.getElementById('topology').value || '[]');
    nodes[index].type = value;
    document.getElementById('topology').value = JSON.stringify(nodes);
}

function removeNode(index) {
    const nodes = JSON.parse(document.getElementById('topology').value || '[]');
    nodes.splice(index, 1);
    updateTopologyNodes(nodes);
}

// 系统组件相关函数
function addComponent() {
    const components = JSON.parse(document.getElementById('componentsData').value || '[]');
    components.push({ name: '', type: '', config: '' });
    updateComponents(components);
}

function updateComponents(components) {
    const container = document.getElementById('components');
    container.innerHTML = components.map((component, index) => `
        <div class="row mb-3 align-items-center">
            <div class="col">
                <input type="text" class="form-control" placeholder="组件名称"
                       value="${component.name || ''}" onchange="updateComponentName(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="组件类型"
                       value="${component.type || ''}" onchange="updateComponentType(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="配置参数"
                       value="${component.config || ''}" onchange="updateComponentConfig(${index}, this.value)">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeComponent(${index})">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    `).join('');
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function updateComponentName(index, value) {
    const components = JSON.parse(document.getElementById('componentsData').value || '[]');
    components[index].name = value;
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function updateComponentType(index, value) {
    const components = JSON.parse(document.getElementById('componentsData').value || '[]');
    components[index].type = value;
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function updateComponentConfig(index, value) {
    const components = JSON.parse(document.getElementById('componentsData').value || '[]');
    components[index].config = value;
    document.getElementById('componentsData').value = JSON.stringify(components);
}

function removeComponent(index) {
    const components = JSON.parse(document.getElementById('componentsData').value || '[]');
    components.splice(index, 1);
    updateComponents(components);
}

// 通信方式相关函数
function addCommunication() {
    const protocols = JSON.parse(document.getElementById('communicationData').value || '[]');
    protocols.push({ name: '', type: '', params: '' });
    updateCommunications(protocols);
}

function updateCommunications(protocols) {
    const container = document.getElementById('communications');
    container.innerHTML = protocols.map((protocol, index) => `
        <div class="row mb-3 align-items-center">
            <div class="col">
                <input type="text" class="form-control" placeholder="协议名称"
                       value="${protocol.name || ''}" onchange="updateProtocolName(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="协议类型"
                       value="${protocol.type || ''}" onchange="updateProtocolType(${index}, this.value)">
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="协议参数"
                       value="${protocol.params || ''}" onchange="updateProtocolParams(${index}, this.value)">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeCommunication(${index})">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    `).join('');
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function updateProtocolName(index, value) {
    const protocols = JSON.parse(document.getElementById('communicationData').value || '[]');
    protocols[index].name = value;
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function updateProtocolType(index, value) {
    const protocols = JSON.parse(document.getElementById('communicationData').value || '[]');
    protocols[index].type = value;
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function updateProtocolParams(index, value) {
    const protocols = JSON.parse(document.getElementById('communicationData').value || '[]');
    protocols[index].params = value;
    document.getElementById('communicationData').value = JSON.stringify(protocols);
}

function removeCommunication(index) {
    const protocols = JSON.parse(document.getElementById('communicationData').value || '[]');
    protocols.splice(index, 1);
    updateCommunications(protocols);
}

// 页面加载时初始化数据
document.addEventListener('DOMContentLoaded', function() {
    // 初始化隐藏字段的值
    document.getElementById('topology').value = JSON.stringify(initialTopology);
    document.getElementById('componentsData').value = JSON.stringify(initialComponents);
    document.getElementById('communicationData').value = JSON.stringify(initialCommunication);
    
    // 更新显示
    updateTopologyNodes(initialTopology);
    updateComponents(initialComponents);
    updateCommunications(initialCommunication);
});
</script>
{% endblock %} 